<template>
  <div>
    <div v-for="item, index in data" :key="index">
      <div class="ed-yyds-item" v-if="!item.children">
        <div class="ed-yyds-draw">
          <div class="ed-heng" v-if="index == 0"></div>
          <div v-else>
            <div></div>
            <span>{{ item.logicalConnective }}</span>
          </div>
        </div>
        <el-select size="mini" v-model="item.col" placeholder="指标值">
          <el-option v-for="col in cols" :key="col.value" :label="col.label" :value="col.value">
          </el-option>
        </el-select>
        <el-select size="mini" v-model="item.symbol" placeholder="逻辑符">
          <el-option v-for="symbol in symbols" :key="symbol.value" :label="symbol.label" :value="symbol.value">
          </el-option>
        </el-select>
        <el-input size="mini" v-model="item.value" placeholder="数据值"></el-input>
        <i class="ed-icon el-icon-plus" @click="addTJ(data, index)" title="向下添加条件"></i>
        <i class="ed-icon el-icon-top" title="上移"></i>
        <i class="ed-icon el-icon-bottom" title="下移"></i>
        <i class="ed-icon el-icon-s-operation" @click="addKH(data, index)" title="向后添加括号"></i>
        <i class="ed-icon el-icon-delete" @click="del(data, index)" title="删除"></i>
      </div>
      <div class="ed-yyds-ch" v-else>
        <div class="ed-yyds-draw">
          <div class="ed-heng" v-if="index == 0"></div>
          <div v-else>
            <div></div>
            <span>{{ item.logicalConnective }}</span>
          </div>
        </div>
        <div class="ed-yyds-ch-con">
          <drawModel :cols="cols" :symbols="symbols" :types="types" :curr="curr" :data="item.children">
          </drawModel>
        </div>
        <div style="margin-left: 20px;display: inline-block;">
          <i class="ed-icon el-icon-plus" @click="addTJ(item.children, index)" title="向下添加条件"></i>
          <i class="ed-icon el-icon-top" title="上移"></i>
          <i class="ed-icon el-icon-bottom" title="下移"></i>
          <i class="ed-icon el-icon-s-operation" @click="addKH(item.children, index)" title="向后添加括号"></i>
          <i class="ed-icon el-icon-delete" @click="del(item.children, index)" title="删除"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'drawModel',

  props: ['cols', 'symbols', 'types', 'curr', 'data'],

  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    del(data, index) {
      data.splice(index, 1)
    },


    addTJ(data, index) {
      data.splice(index + 1, 0, {
        logicalConnective: '',
        col: '',
        symbol: '',
        type: '',
        value: ''
      })
    },

    addKH(data, index) {
      let kh = {
        logicalConnective: '且',
        children: [{
          logicalConnective: '',
          col: '',
          symbol: '',
          type: 'Number',
          value: '0'
        }]
      }
      data.splice(index + 1, 0, kh)
    }
  },
}
</script>

<style scoped>
.ed-yyds-item {
  display: flex;
  align-items: center;
}

.ed-yyds-draw {
  height: 30px;
  width: 80px;
  position: relative;
  display: flex;
  justify-content: right;
  align-items: center;
}

.ed-yyds-item .el-select {
  width: 100px;
  margin-left: 5px;
}

.ed-yyds-item .el-input {
  width: 150px;
  margin-left: 5px;
}

.ed-heng {
  position: absolute;
  top: 15px;
  width: 100%;
  /* border: 1px solid red; */
}

.ed-yyds-ch {
  background: greenyellow;
  align-items: center;
}

.ed-yyds-ch-con {
  display: inline-block;
  background-color: blue;
}

.ed-icon {
  margin-left: 5px;
}

.ed-icon:hover {
  color: #008ad2;
  cursor: pointer;
}
</style>